<template>
  <div>
    <div class="form">
      <div>
        项目名称：
        <el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        项目空间：
        <el-input style="width: 200px;" v-model="keyWord.xmkj" placeholder="请输入项目空间"></el-input>
      </div>
      <div>
        项目状态：
        <el-select v-model="keyWord.xmzt" placeholder="请选择项目状态">
          <el-option
              v-for="item in xmztSel"
              :key="item.keyvalue"
              :label="item.keyname"
              :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div>
        项目类型：
        <el-select v-model="keyWord.xmXmlxbh" placeholder="请选择项目类型">
          <el-option
              v-for="item in xmlxSel"
              :key="item.keyvalue"
              :label="item.keyname"
              :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>

    </div>
    <div style="width: 97%;display: flex;justify-content: end;padding-bottom: 1rem">
      <el-button type="primary" icon="el-icon-search" @click="showXm()">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="reset()">重置</el-button>
    </div>
    <el-table :data="xmList" border class="etable">
      <el-table-column align="center" prop="xmMc" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="xmXmlxmc" label="项目类型">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.xmXmlxbh === '00'">现代农业</el-tag>
          <el-tag effect="dark" type="info" v-if="scope.row.xmXmlxbh === '01'">制造业</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.xmXmlxbh === '02'">信息技术服务</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.xmXmlxbh === '03'">文化创意服务</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.xmXmlxbh === '04'">社会服务</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="xmSsxy" label="项目所属学院">
      </el-table-column>
      <el-table-column align="center" prop="xmTbrmc" label="申报人">
      </el-table-column>
      <el-table-column align="center" prop="xmTbsj" label="项目填报时间">
      </el-table-column>
      <el-table-column align="center" prop="xmKjhm" label="项目空间">
      </el-table-column>
      <el-table-column align="center" prop="xmzt" label="项目状态">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.xmzt === '0'">已申请</el-tag>
          <el-tag effect="dark" type="info" v-if="scope.row.xmzt === '1'">通过初筛</el-tag>
          <el-tag effect="dark" style="background-color: red;border: 0" v-if="scope.row.xmzt === '2'">未过初筛</el-tag>
          <el-tag effect="dark" type="warning" v-if="scope.row.xmzt === '3'">合格</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.xmzt === '4'">不合格</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.xmzt === '5'">入驻</el-tag>
          <el-tag effect="dark" style="background-color: #333333" v-if="scope.row.xmzt === '-1'">退驻</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="详情">
        <template slot-scope="scope">
          <el-button @click="toXmDetail(scope.row.xmBh)" type="success" plain size="small">操作
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {queryCxcyXmList} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      keyWord: {
        xmmc: "",
        xmzt: "",
        xmkj: "",
        xmXmlxbh: ""
      },
      size: 0,
      loading: true,
      xmList: [],
      xmztSel: [],
      xmlxSel: []
    }
  },
  created() {
    this.showXm()
    this.queryKey("xmzt,xmlx")
  },
  methods: {
    queryKey(keyCodes) {
      axios({
        method: 'GET',
        url: '/keyValue/queryKey?keyCodes=' + keyCodes
      }).then(res => {
        if (res.code == "200") {
          this.xmztSel = res.data.xmzt
          this.xmlxSel = res.data.xmlx
        }
      })
    },
    reset() {
      this.pageReq.keyWord = {}
    },
    showXm() {
      queryCxcyXmList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryCxcyXmList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord: {
          xmmc: this.xmmc,
          xmzt: this.xmzt,
          xmkj: this.xmFj,
          xmXmlxbh: this.xmXmlxbh
        }
      }).then(res => {
        if (res.code === "200") {
          this.xmList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryCxcyXmList(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord: {
              xmmc: this.xmmc,
              xmzt: this.xmzt,
              xmKj: this.xmFj,
              xmXmlxbh: this.xmXmlxbh
            }
          }).then(res => {
        if (res.code === "200") {
          this.xmList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    toXmDetail(xmbh) {
      this.$router.push({path: 'cxcyxmXq', query: {xmbh: xmbh}})
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.form {
  width: 95%;
  position: relative;
  right: -5%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0 20px 0;
}

.etable {
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
